<template>
  <div class="header-contain">
    <div class="header-contain-left" @click="handleReloadIndex" :style="{cursor: 'pointer'}">
      <div class="logoLeft" />
      <div class="des">设计资源交易平台</div>
    </div>
    <div class="header-contain-right">
      <router-link to="/cart">
        <el-badge :value="cartNum || 0" class="badge" />
        <i class="el-icon-shopping-cart-full" :style="{paddingRight: '8px', fontSize: '18px' }" />购物车
      </router-link>
      <div class="myShop">
        <el-dropdown trigger="hover">
          <div class="el-dropdown-link">
            <span @click="handleGoShop">
              我的天鹿<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link to="/myorder">
                创建的订单
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/myfootmark">
                我的足迹
              </router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <router-link to="/information">
        <el-badge :value="mesNum" class="badge" />
        <i class="el-icon-bell" :style="{paddingRight: '8px', fontSize: '18px' }" />消息通知
      </router-link>
      <router-link to="/collect">
        <i class="el-icon-star-off" :style="{paddingRight: '8px', fontSize: '18px' }" />收藏夹
      </router-link>
      <el-dropdown trigger="hover">
        <div class="el-dropdown-link">
          联系客服<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <div :style="{paddingLeft: '10px',paddingTop: '5px', color: '#ff5200', fontSize: '15px'}">客服咨询</div>
          <el-dropdown-item>林林林(82490789@qq.com)</el-dropdown-item>
          <el-dropdown-item>林林林(82490789@qq.com)</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="hover" class="user" v-if="login">
        <div class="el-dropdown-link">
          <img :style="{width: '45px', height: '45px', borderRadius: '50%', verticalAlign: 'middle'}" v-if="userInfo.user_pic" :src="userInfo.user_pic" alt="">
          <i v-else class="iconfont icon-LC_icon_user_fill_3 userImg" />
          {{userInfo.user_name}}
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown" class="userModal">
          <div class="userModal-top">
            <div class="userModal-left">
              <img :style="{width: '55px', height: '55px', borderRadius: '50%', verticalAlign: 'middle'}" v-if="userInfo.user_pic" :src="userInfo.user_pic" alt="">
              <i v-else class="iconfont icon-LC_icon_user_fill_3 userImg" />
            </div>
            <div class="userModal-right">
              <p>
                <router-link to="/myInfo">账号管理</router-link>
                |
                <a class="logout" href="/shiro/logout" @click="deleteLocalStorage(); return">退出</a>
              </p>
              <p>积分: XXX</p>
            </div>
          </div>
          <div class="userModal-bottom">
            查看你的专属权益
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <span v-else class="login" @click="handleGoLogin">登录</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  name: 'HeaderBar',
  inject: ['reloadToShop', 'allReload','reload'],
  props: {
    infoNum: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      cartNum: state => state.user.cartNum,
      mesNum: state => state.user.mesNum,
      login: state => state.user.login
    })
  },
  data () {
    return {
      imgUrl: require("@/assets/logo.png"),
    }
  },
  created(){
    let storage = window.localStorage;
    //刷新页面发的请求时 userInfo会被清空 
    if(!this.login){
      if(storage.userInfo){
        this.fetchDetailById({user_id: JSON.parse(storage.userInfo).user_id });
      }
    }
    //从登陆页进来
    //避免重复发请求
    if(storage.userInfo){
      this.fetchCartCount({ user_id : this.login ? this.userInfo.user_id : JSON.parse(storage.userInfo).user_id });
      this.fetchMessageCount({ message_userid: this.login ? this.userInfo.user_id : JSON.parse(storage.userInfo).user_id });
    }
    this.fetchIndexGoods();
    this.fetchHotword();
  },
  methods: {
    ...mapMutations({
      deleteLocalStorage: 'user/deleteLocalStorage'
    }),
    ...mapActions(['fetchIndexGoods','fetchHotword','fetchLogout']),
    ...mapActions({
      fetchCartCount: 'user/fetchCartCount',
      fetchMessageCount: 'user/fetchMessageCount',
      fetchDetailById: 'user/fetchDetailById'
    }),
    handleGoShop(){
      if(!this.login){
        this.$message({
          type: 'error',
          message: '请先登录',
          showClose: true
        });
      }else{
        this.reloadToShop(this.userInfo.shop_id);
      }
    },
    handleGoLogin(){
      this.$router.push({
        name: 'Login'
      });      
    },
    handleReloadIndex(){
      this.fetchIndexGoods();
      this.reload();
    }
  },
  //监听异步数据 一般用watch
  // watch: {
  //   login(n, o){
  //     console.log(this.login,'watch')
  //     // if(n){
  //     //   this.fetchCartCount({ user_id : this.userInfo.user_id });
  //     //   this.fetchMessageCount({ message_userid: this.userInfo.user_id });
  //     // }
  //   }
  // }
}
</script>
<style lang="scss" src='./index.scss' scoped />

//修改element-UI的样式 这里可以做到局部修改
<style lang="scss">
.header-contain-right {
  a {
    position: relative;
  }
  .el-badge {
    position: absolute;
    top: -5px;
    left: 10px;
    .el-badge__content {
      background-color: red;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      text-align: center;
      padding: 0;
      border: unset;
    }
  }
}
</style>